<template>
	<view>
		<view class="vipbg"></view>
		<navbar title="会员中心" mode="dark" color="#fff" background="#44403D"></navbar>
		<view class="main pr">
			<view class="user-box flex">
				<image class="avatar" :src="userinfo.avatar" mode=""></image>
				<view>
					<view class="nickname">{{userinfo.name}}</view>
					<view class="endtime" v-if="vipEnd">月卡会员 {{vipEnd}} 到期</view>
					<view class="endtime" v-else>暂无会员</view>
				</view>
			</view>
			<image class="vip-image" src="https://youlinapi.zhihui361.com/image/wx/vip1.png" mode="aspectFill"></image>
			<view class="vip-box flex fww">
				<view class="vip-list fa fdc jcc" :class="{active: vipIndex == index}" v-for="(item, index) in vipItems" :key="index" @click="selectVip(item.vipSettingId, index)">
					<view class="name">{{item.name}}</view>
					<view class="price-box fa">
						<view class="price">{{item.price}}</view>
						<view class="text">元</view>
					</view>
				</view>
			</view>
			<view class="rights-box">
				<view class="title">会员权益</view>
				<view class="fa">
					<image class="vip-icon" src="../../static/vip2.png" mode=""></image>
					<view>
						<view class="name">免费发布</view>
						<view class="content">用户开通会员后享受免费发布帮取帮送订单</view>
					</view>
				</view>
			</view>
			<view class="pay-wrapper">
				<view class="title">支付方式</view>
				<view class="pay-box">
					<view class="pay-list fa jcsb" @click="balancePay">
						<view class="fa">
							<image class="pay-icon" src="../../static/balancepay.png" mode=""></image>
							<view>余额支付</view>
						</view>
						<image class="pick-icon" src="../../static/pick-fill.png" mode="" v-if="payType == 1"></image>
						<image class="pick-icon" src="../../static/pick.png" mode="" v-else></image>
					</view>
					<view class="pay-list fa jcsb" @click="wxPay">
						<view class="fa">
							<image class="pay-icon" src="../../static/wxpay.png" mode=""></image>
							<view>微信支付</view>
						</view>
						<image class="pick-icon" src="../../static/pick-fill.png" mode="" v-if="payType == 0"></image>
						<image class="pick-icon" src="../../static/pick.png" mode="" v-else></image>
					</view>
				</view>
			</view>
			<view class="confirm-btn" @click="buyVip">{{vipEnd ? '立即续费' : '立即购买'}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: {
					avatar: '',
					name: '',
					vipEnd: ''
				},
				vipEnd: '',
				vipItems: [],
				vipIndex: 0,
				payType: 0,
				vipSettingId: ''
			};
		},
		onLoad() {
			this.getUserinfo()
			this.getVipSetting()
		},
		methods: {
			getUserinfo() {
				this.api.userinfoFunc().then(res => {
					this.userinfo = res.data
					this.vipEnd = res.data.vipEnd.substr(0, 10)
				})
			},
			getVipSetting() {
				this.api.vipSettingFunc().then(res => {
					if(res.code == 200) {
						this.vipItems = res.data
						this.vipSettingId = res.data[0].vipSettingId
					}
				})
			},
			selectVip(id, index) {
				this.vipSettingId = id
				this.vipIndex = index
			},
			balancePay() {
				this.payType = 1
			},
			wxPay() {
				this.payType = 0
			},
			buyVip() {
				uni.showLoading({
					title: '加载中'
				})
				this.api.miniAppPayFunc({
					payType: this.payType,
					vipSettingId: this.vipSettingId
				}).then(res => {
					uni.hideLoading()
					if(res.code == 200) {
						if(this.payType) {
							uni.showToast({
								title: '支付成功'
							})
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/mine/vip_success'
								})
							}, 1500)
						}else {
							uni.requestPayment({
								provider: 'wxpay',
								nonceStr: res.data.nonceStr,
								package: res.data.package,
								paySign: res.data.paySign,
								signType: res.data.signType,
								timeStamp: res.data.timeStamp,
								success: res2 => {
									uni.showToast({
										title: '支付成功'
									})
									setTimeout(() => {
										uni.redirectTo({
											url: '/pages/mine/vip_success'
										})
									}, 1500)
								}
							})
						}
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						this.lock = true
					}
				}).catch(err => {
					uni.hideLoading()
					uni.showToast({
						title: '操作失败',
						icon: 'none'
					})
					this.lock = true
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.vipbg{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient( 180deg, #44403D 0%, #1F1D1C 100%);
	}
	.main{
		padding: 18rpx 36rpx 100rpx;
	}
	.user-box{
		color: #fff;
		.avatar{
			margin-right: 24rpx;
			width: 116rpx;
			height: 116rpx;
			border-radius: 50%;
		}
		.nickname{
			margin-top: 8rpx;
			font-size: 36rpx;
			font-weight: bold;
			line-height: 42rpx;
		}
		.endtime{
			margin-top: 6rpx;
			font-size: 26rpx;
			line-height: 30rpx;
		}
	}
	.vip-image{
		margin-top: 32rpx;
		width: 100%;
		height: 336rpx;
	}
	.vip-box{
		margin-top: 38rpx;
		.vip-list{
			margin-right: 28rpx;
			width: 206rpx;
			height: 176rpx;
			border-radius: 24rpx;
			background-color: #403E3C;
			&:nth-child(3n) {
				margin-right: 0;
			}
			.name{
				font-size: 30rpx;
				font-weight: bold;
				color: #FFFAE7;
			}
			.price-box{
				margin-top: 18rpx;
				color: #EBC06C;
				.price{
					font-size: 48rpx;
					line-height: 56rpx;
				}
				.text{
					font-size: 32rpx;
					line-height: 38rpx;
				}
			}
			&.active{
				background: linear-gradient( 137deg, #F6E5D0 0%, #E4BD92 100%);
				box-shadow: inset 0rpx -2rpx 2rpx 0rpx #E3BB94, 0rpx 4rpx 8rpx 0rpx rgba(195,159,116,0.25);
				.name{
					color: #333;
				}
				.price-box{
					color: #7A4801;
				}
			}
		}
	}
	.rights-box{
		margin-top: 48rpx;
		padding: 28rpx 24rpx 34rpx;
		border-radius: 24rpx;
		color: #FFFAE7;
		background-color: #403E3C;
		.title{
			position: relative;
			margin-bottom: 30rpx;
			padding-left: 22rpx;
			font-size: 36rpx;
			font-weight: bold;
			&::after{
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 6rpx;
				height: 40rpx;
				border-radius: 4rpx;
				background-color: #EAC084;
			}
		}
		.vip-icon{
			margin-right: 20rpx;
			width: 64rpx;
			height: 64rpx;
		}
		.name{
			font-size: 30rpx;
			line-height: 36rpx;
		}
		.content{
			margin-top: 12rpx;
			font-size: 26rpx;
			line-height: 30rpx;
		}
	}
	.pay-wrapper{
		margin-top: 40rpx;
		padding: 28rpx 22rpx 36rpx 26rpx;
		border-radius: 24rpx;
		font-size: 26rpx;
		color: #fff;
		background-color: #403E3C;
		.pay-box{
			padding-top: 6rpx;
			.pay-list{
				margin-top: 36rpx;
				.pay-icon{
					margin-right: 20rpx;
					width: 48rpx;
					height: 48rpx;
				}
				.pick-icon{
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
	}
	.confirm-btn{
		margin: 0;
		margin-top: 100rpx;
		font-size: 32rpx;
		color: #824A24;
		background: linear-gradient( 137deg, #F6E5D0 0%, #E4BD92 100%);
		box-shadow: inset 0rpx -2rpx 2rpx 0rpx #E3BB94, 0rpx 4rpx 8rpx 0rpx rgba(195,159,116,0.25);
	}
</style>
